<template>
    <div id="DormitoryInformation"
        :style="{ 'transition': isCollapse ? '.6s all' : '.35s all', 'width': isCollapse ? myWidth1 : myWidth2 }">
        <div class="main" :style="{'height':myHeight}">


            <div class="s_top">
                <div class="serach">
                    <el-row>
                        <el-col :span="2" style="text-align: right;padding-right: 10px;font-size: 13px;">
                            楼栋号
                        </el-col>
                        <el-col :span="6">
                            <el-input v-model="serach.b_id" placeholder="请输入内容"></el-input>
                        </el-col>
                        <el-col :span="2" style="text-align: right;padding-right: 10px;font-size: 13px;">
                            宿舍号
                        </el-col>
                        <el-col :span="6">
                            <el-input v-model="serach.d_id" placeholder="请输入内容"></el-input>
                        </el-col>
                        <el-col :span="2" style="text-align: right;padding-right: 10px;font-size: 13px;">
                            性别
                        </el-col>
                        <el-col :span="6">
                            <el-select v-model="serach.gender" clearable placeholder="请选择">
                                <el-option label="男" value="男">
                                </el-option>
                                <el-option label="女" value="女">
                                </el-option>
                            </el-select>
                        </el-col>
                        
                    </el-row>
                </div>
                <el-button size="mini" style="margin-left:10px" @click="pageNum = 1; init();">重置</el-button>
                <el-button type="primary" size="mini" @click="forSerach">搜索</el-button>
            
                <el-button type="primary" class="btn_excel" style="margin-left: 2px;" @click="forExcel">导出为Excel</el-button>
                <el-button type="success" class="btn_excel" style="margin-right: 0px;" @click="addDormitory">添加数据</el-button>
            </div>

            
            <!-- 表格 -->
            <el-table :data="tableData" stripe style="width: 100%" :height="myHeight-50" id="excel">
                <el-table-column type="index" width="50">
                </el-table-column>
                <el-table-column  label="楼栋号">
                    <template slot-scope="scope">
                        <i class="el-icon-office-building"></i>
                        <span style="margin-left: 10px">{{ scope.row.buildingEntity.number }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="" label="性质">

                    <template slot-scope="scope">
                        <el-tag :type="scope.row.buildingEntity.gender == '1' ? 'primary' : 'success'" disable-transitions>
                            {{ scope.row.buildingEntity.gender == '1' ? '男' : '女'}}
                        </el-tag>
                    </template>

                </el-table-column>
                <el-table-column prop="number" label="宿舍号">
                </el-table-column>
                <el-table-column prop="capacity" label="容量">
                </el-table-column>
                <el-table-column prop="personNumber" label="已选">
                </el-table-column>
                <el-table-column label="操作" v-if="!notforexcel">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="updateDormitory(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="deleteDormitory(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            

            <!-- 分页条 -->
        <div class="block" style="background-color:#ffffff">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="pageNum"
                    :page-size="pageSize" layout="prev, pager, next, jumper" :total="sumNum">
                </el-pagination>
            </div>
        </div>


        <!-- 编辑打开的表格 -->
        <el-drawer :title="title" :visible.sync="drawer" direction="rtl" :before-close="handleClose">
            <div class="change_update">
                <div @click="toUpdate=false" :style="{'color':!toUpdate?'#409eff':'', 'border-bottom': !toUpdate?'#409eff 2px solid':''}">基本信息</div>
                <div @click="toUpdate=true,forSerachDetail()" :style="{'color':toUpdate?'#409eff':'', 'border-bottom': toUpdate?'#409eff 2px solid':''}">选取信息</div>
            </div>
            <el-form v-if="!toUpdate" ref="form" :model="updateData" label-width="80px" style="padding-right:20px">
                <el-form-item label="楼栋号">
                    <el-input disabled v-model="updateData.buildingEntity.number"></el-input>
                </el-form-item>
                <el-form-item label="宿舍号">
                    <el-input v-model="updateData.number" disabled></el-input>
                </el-form-item>
                <el-form-item label="容量">
                    <el-input v-model="updateData.capacity"></el-input>
                </el-form-item>
                <el-form-item label="已选">
                    <el-input disabled v-model="updateData.personNumber" placeholder="0"></el-input>
                </el-form-item>
                
                <el-form-item label="性质">
                    <el-select v-model="updateData.buildingEntity.gender">
                        <el-option v-for="(item) in gender" :key="item.sex" :label="item.sex" :value="item.value">
                        </el-option>
                        
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-if="title=='修改数据'" @click="onUpdate">修改</el-button>
                    <el-button type="primary" v-if="title=='添加数据'" @click="onAdd">添加</el-button>
                    <el-button @click="drawer=false">取消</el-button>
                </el-form-item>
            </el-form>
            <div v-if="toUpdate">
            <el-table  :data="updateDetail" style="width: 100%;padding-left:20px;padding-right: 20px;" >
                <el-table-column label="姓名"  prop="name">
                </el-table-column>
                <el-table-column label="学号" prop="number">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-button style="margin-top:20px" type="primary" @click="addStudent">添加学生</el-button>
            <el-button style="margin-top:20px" type="primary" @click="drawer=!drawer">保存</el-button>
            </div>



            <el-drawer title="添加学生" :append-to-body="true" :before-close="handleClose" :visible.sync="innerDrawer">
                <el-form ref="form" :model="newStudent" label-width="80px">
                    <el-form-item label="姓名">
                        <el-input v-model="newStudent.name"></el-input>
                    </el-form-item>
                    <el-form-item label="学号">
                        <el-input v-model="newStudent.number"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onAddStudent">立即创建</el-button>
                        <el-button @click="innerDrawer=!innerDrawer">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-drawer>
        </el-drawer>



        <!-- 添加打开的表格 -->
        <el-drawer :title="title" :visible.sync="drawer2" direction="rtl" :before-close="handleClose">
            <el-form  ref="form" :model="addDor" label-width="80px" style="padding-right:20px">
                <el-form-item label="楼栋号">
                    <el-input v-model="addDor.bid"></el-input>
                </el-form-item>
                <el-form-item label="宿舍号">
                    <el-input v-model="addDor.number"></el-input>
                </el-form-item>
                <el-form-item label="容量">
                    <el-input v-model="addDor.capacity"></el-input>
                </el-form-item>
                <el-form-item label="已选">
                    <el-input v-model="addDor.personNum"></el-input>
                </el-form-item>
        
                <el-form-item>
                    <el-button type="primary" v-if="title=='添加数据'" @click="onAdd">添加</el-button>
                    <el-button @click="drawer2=false">取消</el-button>
                </el-form-item>
            </el-form>
              
        </el-drawer>
    </div>
</template>
<script>
import axios from 'axios';
export default {
    data() {
        return {
            allData:[],
            toUpdate:false,//判断展示那个编辑面板
            sumNum: 0,
            pageSize: 10,
            pageNum: 1,//现在的页数
            title: "",
            drawer: false,//编辑表格是否打开
            drawer2:false,//添加表格是否打开
            innerDrawer:false,//内部表格是否打开
            notforexcel: false,
            tableData: [],//表格信息
            updateData: {//修改的宿舍基本信息
                buildingEntity:{
                    bid:"",
                    gender:"",
                    number:""
                },
                capacity:"",
                did:"",
                number:"",
                personNumber:""
            },
            forUpdate:{
                buildingEntity: {}
            },
            addDor:{},//添加的宿舍信息
            gender:[{
                sex:"男",
                value:1
            },{
                sex:"女",
                value:0
            }],
            updateDetail:[],//宿舍选取信息
            newStudent:{
                name:"",
                number:"",
            },
            myHeight: "",
            myWidth1: "",//未展开的宽度
            myWidth2: "",//展开了的宽度
            serach: {
                b_id:"",//楼栋号
                d_id:"",//宿舍号
                gender:"",//性别
            }
        }
    },
    props: {
        isCollapse: true,
        userdetail: {},
    },
    created(){
        this.myHeight = window.innerHeight - 40 - 40 - 20 - 30 + "";
        this.myWidth1 = window.innerWidth - 64 - 30 + "px"
        this.myWidth2 = window.innerWidth - 200 - 30 + "px"
    },
    mounted(){
        this.init();
    },
    methods:{
        handleSizeChange(val) {//页的大小改变时触发
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {//当前页切换时触发
            // console.log(`当前页: ${val}`);
            var _this=this;
            axios({
                method: "get",
                url: "api/dormitories/getAllDormitory?pageSize=" + _this.pageSize + "&pageNum=" + val
            }).then(function (resp) {
                // console.log(resp.data);
                _this.tableData = resp.data.data.data;
            })
        },
        forSerach(){
            var _this=this;
            if (this.serach.b_id == "" && this.serach.d_id == "" && this.serach.gender=="") {
                this.$message('请输入内容！');
            } else {
                console.log(this.serach);
                if(this.serach.gender!=""){//根据性别查
                    var ser = this.serach.gender=="男"?1:0;
                    var _this=this;
                    axios({
                        method: "get",
                        url: "api/dormitories/getByGender/" + ser
                    }).then(function (resp) {
                        var dor = [];
                        var len = resp.data.data.data.length;
                        var suc = 0;
                        resp.data.data.data.forEach((item, index) => {
                            axios({
                                method: "get",
                                url: "api/dormitories/getBuilding/" + item.bid
                            }).then(function (resp) {
                                var buildingEntity=item;
                                resp.data.data.dormitoryEntities.forEach((item)=>{
                                    item.buildingEntity=buildingEntity;
                                })
                                dor.push(...resp.data.data.dormitoryEntities);
                                suc++;
                                if (suc == len) {
                                    _this.tableData=dor;
                                    _this.pageNum=1;
                                    _this.sumNum=_this.tableData.length;
                                    _this.serach.gender="";
                                    _this.serach.b_id="";
                                    _this.serach.d_id="";
                                }
                            })
                        })
                    })
                }else{
                    if(this.serach.d_id==""){//只根据楼栋号查
                        axios({
                            method: "get",
                            url: "api/dormitories/getBuilding/" + _this.serach.b_id
                        }).then(function (resp) {
                            var buildingEntity={
                                bid: resp.data.data.bid,
                                gender: resp.data.data.gender,
                                number: resp.data.data.number
                            }
                            resp.data.data.dormitoryEntities.forEach((item,index)=>{
                                item.buildingEntity=buildingEntity;
                            })
                            // console.log(resp.data.data.dormitoryEntities);//宿舍实体
                            _this.tableData = resp.data.data.dormitoryEntities;
                            _this.pageNum=1;
                            _this.sumNum = resp.data.data.dormitoryEntities.length;
                            _this.serach.b_id="";
                        })
                    }else if(this.serach.b_id==""){//只根据宿舍号差
                        axios({
                            method: "get",
                            url: "api/dormitories/getDormitoryByNumber/"+_this.serach.d_id
                        }).then(function (resp) {
                            
                            _this.tableData = resp.data.data;
                            _this.pageNum = 1;
                            _this.sumNum = resp.data.data.length;
                            _this.serach.d_id = "";
                        })
                    }else{//两个一起查
                        axios({
                            method: "get",
                            url: "api/dormitories/getDormitoryByNumber/" + _this.serach.d_id
                        }).then(function (resp) {
                            _this.tableData=[];
                            var tempData = resp.data.data;
                            tempData.forEach((item)=>{
                                if(item.buildingEntity.bid==_this.serach.b_id){
                                    _this.tableData.push(item);
                                }
                            })
                            _this.pageNum = 1;
                            _this.sumNum = _this.tableData.length;
                            _this.serach.d_id = "";
                            _this.serach.b_id = "";
                        })
                    }
                    
                }
            }

        }, 
        deleteDormitory(index,row){
            this.tableData.splice(index, 1);
            var _this=this;
            axios({
                method: "delete",
                url: "api/dormitories/deleteDormitory/"+row.did
            }).then(function (resp) {
                _this.$message({
                    message: '删除成功',
                    type: 'success'
                });
            })
        },
        updateDormitory(index, row){
            this.title = "修改数据";
            this.drawer = !this.drawer;
            // Object.assign(this.updateData,row);
            // this.updateData=row;
            this.updateData.buildingEntity.bid = row.buildingEntity.bid;
            this.updateData.buildingEntity.gender = row.buildingEntity.gender;
            this.updateData.buildingEntity.number = row.buildingEntity.number;
            this.updateData.capacity = row.capacity;
            this.updateData.did=row.did;
            this.updateData.number=row.number;
            this.updateData.personNumber=row.personNumber;  


            // console.log(this.updateData);
        },
        onUpdate(){
            if (this.updateData.capacity=="") {
                this.$message("请输入规范内容")
            } else {
                console.log(this.updateData);
                var _this=this;

                axios({//更新楼栋信息
                    method: "put",
                    url: "api/dormitories/updateBuilding",
                    data: {
                        "bid": _this.updateData.buildingEntity.bid,
                        "gender": _this.updateData.buildingEntity.gender
                    }
                }).then(function (resp) {
                    
                })

                axios({
                    method: "put",
                    url: "api/dormitories/updateDormitory",
                    data: {
                        "did": _this.updateData.did,
                        "bid": _this.updateData.buildingEntity.bid,
                        "capacity": _this.updateData.capacity,
                        "personnumber":_this.updateData.personNumber
                    }
                }).then(function (resp) {
                    _this.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                    _this.init();
                })


                this.drawer = !this.drawer;
            }
        },
        addDormitory(){
            //消除上一次的残留数据
            this.title = "添加数据"
            this.addDor = {};
            this.drawer2 = !this.drawer2;
        },
        onAdd(){
            console.log(this.addDor );
            if (this.addDor.bid == "" || this.addDor.bid == null || this.addDor.number == "" || this.addDor.number == null || this.addDor.capacity == "" || this.addDor.capacity == null || this.addDor.personNum == "" || this.addDor.personNum == null) {
                this.$message("请输入规范内容")
            } else {
                //数据库操作
                /*


                */
                var _this=this;
                console.log(this.addDor);
               
                axios({
                    method: "post",
                    url: "api/dormitories/insertDormitory",
                    data: _this.addDor
                }).then(function (resp) {
                    _this.$message({
                        message: '添加成功',
                        type: 'success'
                    });
                    _this.init();
                }) 

                this.drawer2 = !this.drawer2;

            }
        },
        forSerachDetail(){//查询该宿舍选取信息
            // console.log(this.updateData);
            /*数据库查

            
            */
            this.updateDetail = [{//修改的宿舍选取人信息
                name: "张三",
                number: "20222022",
            }, {
                    name: "张四",
                    number: "20222020",
                }, {
                    name: "张五",
                    number: "20222020",
                }, {
                    name: "张六",
                    number: "20222020",
                },];
            
        },
        handleDelete(index, row) {//删除学生选取信息
            // console.log(index, row);
            this.updateDetail.splice(index,1);
            this.tableData[index].dormitory.person_num--;
            /*
            数据库删
            */
        },
        addStudent(){//往宿舍添加学生
            // console.log(this.updateData)
            
            if(this.updateData.dormitory.capacity==this.updateData.dormitory.person_num){
                //人已经满了无法添加
                this.$message("人数已满，无法添加");
            }else{
                this.innerDrawer = !this.innerDrawer;

            }
        },
        onAddStudent(){
            if(this.newStudent.name==""||this.newStudent.number==""){
                this.$message("请输入正确信息");
            }else{
                // this.updateDetail.p
                /*
                数据库加
                */
                this.forSerachDetail();
                this.innerDrawer=!this.innerDrawer;
                this.newStudent.name="";
                this.newStudent.number="";
            }
        },
        forExcel() {

            var temp = this.tableData;
            this.tableData=this.allData
            this.notforexcel = !this.notforexcel;

            this.$nextTick(() => {
                this.Excels.exportExcel("导出数据.xlsx", "#excel");  //此括号里面（第一个是导出文件的名称，第二个是需要导出的标签的id）
                this.notforexcel = !this.notforexcel;
                this.tableData=temp;

            })
        },
        init(){
            var _this=this;

            axios({
                method: "get",
                url: "api/dormitories/getAllDormitory?pageSize=1000&pageNum=1"
            }).then(function (resp) {
                // console.log(resp.data);
                _this.sumNum = resp.data.data.totalNum;
                _this.allData=resp.data.data.data;
            })

            axios({
                method: "get",
                url: "api/dormitories/getAllDormitory?pageSize=" + _this.pageSize +"&pageNum="+_this.pageNum
            }).then(function (resp) {
                // console.log(resp.data);
                _this.tableData=resp.data.data.data;
            })

        },
        handleClose(done) {
            this.$confirm('还未保存是否关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        }
    }
}
</script>
<style scoped>
#DormitoryInformation {
    float: left;
    /* height: 500px; */
}

.main {
    width: 100%;
    margin-top: 15px;
}

.main .s_top {
    text-align: initial;
    width: 100%;
    height: 50px;
    line-height: 50px;
    background-color: #ffffff;
    border-bottom: 0.7px solid rgba(0, 0, 0, .2);
}

.serach {
    width: 650px;
    height: 100%;
    float: left;
}

.btn_excel {
    float: right;
    margin-top: 5px;
    margin-right: 10px;
}
.change_update{
    height: 50px;
    border-bottom: 0.7px solid rgba(0, 0, 0, .2);
    border-top: 0.7px solid rgba(0, 0, 0, .2);
    margin-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: left;
}
.change_update>div{
    display: inline-block;
    line-height: 48px;
    padding-left: 20px;
    padding-right: 20px;
    cursor: pointer;
}
</style>